<template>
  <div
    class="h-full bg-zinc-200 dark:bg-zinc-800 duration-400 overflow-auto xl:pt-1"
  >
    <div
      class="relative max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-400 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border-[1px] xl:px-4 xl:py-2"
    >
      <!-- 移动端 navbar -->
      <m-navbar sticky v-if="isMobileTerminal" :clickLeft="onNavbarLeftClick">
        个人资料
      </m-navbar>
      <!-- pc 端 -->
      <div v-else class="text-lg font-bold text-center mb-4 dark:text-zinc-300">
        个人资料
      </div>
      <div class="h-full w-full px-1 pb-4 text-sm mt-2 xl:w-2/3 xl:pb-0">
        <!-- 头像 -->
        <div class="py-1 xl:absolute xl:right-[16%] xl:text-center">
          <span
            class="w-8 inline-block mb-2 font-bold text-sm dark:text-zinc-300 xl:block xl:mx-auto"
          >
            我的头像
          </span>
          <!-- 头像部分 -->
          <div
            class="relative w-[80px] h-[80px] group xl:cursor-pointer xl:left-[50%] xl:translate-x-[-50%]"
            @click="onAvatarClick"
          >
            <img
              v-lazy
              :src="$store.getters.userInfo.avatar"
              alt=""
              class="rounded-[50%] w-full h-full xl:inline-block"
            />
            <div
              class="absolute top-0 rounded-[50%] w-full h-full bg-[rgba(0,0,0,.4)] hidden xl:group-hover:block"
            >
              <m-svg-icon
                name="change-header-image"
                class="w-2 h-2 m-auto mt-2"
              />
              <div
                class="text-xs text-white dark:text-zinc-300 scale-90 mt-0.5"
              >
                点击更换头像
              </div>
            </div>
          </div>
          <!-- 隐藏域 -->
          <input
            v-show="false"
            ref="inputFileTarget"
            type="file"
            accept=".png, .jpeg, .jpg, .gif"
            @change="onSelectImgHandler"
          />
          <p class="mt-1 text-zinc-500 dark:text-zinc-400 text-xs xl:w-10">
            支持 jpg、png、jpeg、gif 格式大小 5M 以内的图片
          </p>
        </div>
        <!-- 用户名 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            用户名
          </span>
          <m-input
            v-model="userInfo.nickname"
            class="w-full"
            type="text"
            maxlength="20"
          />
        </div>
        <!-- 职位 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            职位
          </span>
          <m-input v-model="userInfo.title" class="w-full" type="text" />
        </div>
        <!-- 公司 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            公司
          </span>
          <m-input v-model="userInfo.company" class="w-full" type="text" />
        </div>
        <!-- 个人主页 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            个人主页
          </span>
          <m-input v-model="userInfo.homePage" class="w-full" type="text" />
        </div>
        <!-- 个人介绍 -->
        <div class="py-1 xl:flex xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            个人介绍
          </span>
          <m-input
            v-model="userInfo.introduction"
            class="w-full"
            type="textarea"
            maxlength="50"
          />
        </div>
        <!-- 保存修改 -->
        <m-button
          class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          :loading="loading"
          @click="onChangeProfile"
        >
          保存修改
        </m-button>
        <!-- 移动端退出登录 -->
        <m-button
          v-if="isMobileTerminal"
          class="w-full dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          @click="onLogoutClick"
        >
          退出登录
        </m-button>
      </div>
    </div>
    <!-- pc端 -->
    <m-dialog
      v-if="!isMobileTerminal"
      title="图片裁剪"
      v-model="isDialogVisible"
    >
      <changeAvatar
        :currentBlobURL="currentBlobURL"
        @handleClose="isDialogVisible = false"
      ></changeAvatar>
    </m-dialog>

    <!-- 移动端 -->
    <m-popup
      v-else
      :class="{ 'h-screen': isDialogVisible }"
      v-model="isDialogVisible"
    >
      <changeAvatar
        :currentBlobURL="currentBlobURL"
        @handleClose="isDialogVisible = false"
      ></changeAvatar>
    </m-popup>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import { isMobileTerminal } from '@/utils/flexibal.js'
import { editUserInfo } from '@/api/sys'
import { message, confirm } from '@/libs'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import changeAvatar from './components/changeAvatar.vue'

const store = useStore()
const router = useRouter()
const loading = ref(false)
// 隐藏域
const inputFileTarget = ref(null)
// 头像 dialog 展示
const isDialogVisible = ref(false)
// 选中的图片
const currentBlobURL = ref('')
/**
 * 数据本地的双向同步，增加一个单层深拷贝
 */
const userInfo = ref({ ...store.getters.userInfo })
// 隐藏域 文件更改回调 打开图片之后的回调
const onSelectImgHandler = () => {
  const picture = inputFileTarget.value.files[0]
  currentBlobURL.value = URL.createObjectURL(picture)
  if (currentBlobURL.value) {
    isDialogVisible.value = true
  }
}
watch(isDialogVisible, (value) => {
  if (value) return
  inputFileTarget.value.value = null
})
// 移动端点击回退事件
const onNavbarLeftClick = () => {
  store.commit('app/changeRouterType', 'back')
  router.back()
}
// 头像点击事件
const onAvatarClick = () => {
  inputFileTarget.value.click()
}

// 移动端退出登录
const onLogoutClick = () => {
  confirm('确定要退出登录吗？').then(() => {
    store.dispatch('user/logout')
  })
}

// 保存修改
const onChangeProfile = () => {
  loading.value = true
  userInfo.value = { ...userInfo.value, ...store.getters.userInfo }
  editUserInfo(userInfo.value)
    .then((res) => {
      if (res.code == 200) {
        message(res.message, '修改成功', 2000)
        store.commit('user/setUserInfo', userInfo.value)
      }
    })
    .catch(() => {
      message('error', '修改失败')
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
<style scoped lang="scss"></style>
